<template>
  <div class="content" v-loading="loading">
    <!-- 金额数据 -->
    <div class="nav-list">
      <div class="nav-item" v-for="(item, index) in navList" :key="index">
        <div class="title ellipsis1">{{ item.title }}</div>
        <div class="num ellipsis1">
          <span class="prefix" v-if="item.money">￥</span>{{ item.num }}
        </div>
      </div>
    </div>
    <div class="top">
      <el-button size="small" type="primary" @click="onExportClick"
        >导出数据</el-button
      >

      <el-button
        class="search"
        size="small"
        type="primary"
        @click="searchOrderData"
        >搜索</el-button
      >

      <el-select
        style="width:120px;"
        size="small"
        v-model="form.type"
        filterable
        class="search"
        placeholder="收益类型"
      >
        <el-option label="全部" :value="0">全部</el-option>
        <el-option label="小店入驻奖励" :value="30"></el-option>
        <el-option label="服务商入驻奖励" :value="25"></el-option>
        <el-option label="红包充值奖励" :value="50"></el-option>
        <el-option label="会员费分成" :value="60"></el-option>
        <el-option label="广告服务费" :value="35"></el-option>
      </el-select>

      <el-date-picker
        v-model="form.end_time"
        class="picker"
        type="date"
        style="width:142px"
        size="small"
        value-format="yyyy-MM-dd"
        placeholder="结束时间"
      >
      </el-date-picker>
      <span class="guodu">~</span>
      <el-date-picker
        v-model="form.start_time"
        type="date"
        class="picker"
        style="width:142px"
        value-format="yyyy-MM-dd"
        size="small"
        placeholder="起始时间"
      ></el-date-picker>
      <span class="guodu">收益时间：</span>
    </div>
    <el-table
      :data="tableData"
      style="width:100%;padding:0 20px;"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor"
    >
      <el-table-column label="收益时间" prop="create_time"></el-table-column>
      <el-table-column label="收益类型" prop="type_work"> </el-table-column>
      <el-table-column label="收益金额">
        <template slot-scope="scope"> ¥{{ scope.row.money }} </template>
      </el-table-column>
      <el-table-column label="备注">
        <template slot-scope="scope">
          {{ scope.remark }}
        </template>
      </el-table-column>
    </el-table>
    <el-col :span="24">
      <div class="pagination">
        <el-pagination
          background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </el-col>
  </div>
</template>

<script>
import { getServerInfo, getServerOrders } from '@/api/myProfit'
import { API_BASE_URL } from '@/config'
export default {
  data() {
    return {
      navList: [
        {
          title: '本月服务商加入奖励',
          num: 0,
          money: true
        },
        {
          title: '本月会员店加入奖励',
          num: 0,
          money: true
        },
        {
          title: '本月红包充值奖励',
          num: 0,
          money: true
        },
        {
          title: '本月广告服务费奖励',
          num: 0,
          money: true
        }
      ],
      form: {
        type: 0,
        start_time: '',
        end_time: '',
        is_export: '',
        page: 1,
        size: 20
      },
      total: 0,
      tableData: [],
      loading: false
    }
  },
  created() {
    this.getDataInfo()
  },
  methods: {
    async getDataInfo() {
      this.loading = true
      let res = await getServerInfo()
      if (res.code === 200) {
        this.navList[0].num = res.data.sp_join_reward
        this.navList[1].num = res.data.shop_join_reward
        this.navList[2].num = res.data.red_picket_recharge_reward
        this.navList[3].num = res.data.sp_royalty
      } else {
        this.$message.error(res.message)
      }

      if (this.form.start_time == null) {
        this.form.start_time = ''
      }
      if (this.form.end_time == null) {
        this.form.end_time = ''
      }
      let listRes = await getServerOrders(this.form)
      if (listRes.code === 10000) {
        this.tableData = listRes.data.data || []
        this.total = listRes.data.total
      } else {
        this.$message.error(listRes.message)
      }

      this.loading = false
    },
    async getData() {
      if (this.form.start_time == null) {
        this.form.start_time = ''
      }
      if (this.form.end_time == null) {
        this.form.end_time = ''
      }
      let listRes = await getServerOrders(this.form)
      if (listRes.code === 10000) {
        if (this.form.is_export == 1) {
          this.form.is_export = ''
          window.open(
            `${API_BASE_URL}/admin/download/zip/${listRes.data[1].download_token}`
          )
        } else {
          this.tableData = listRes.data.data || []
          this.total = listRes.data.total
        }
      } else {
        this.$message.error(listRes.message)
      }
      this.form.is_export = ''
    },
    onExportClick() {
      this.form.is_export = 1
      this.getData()
    },
    searchOrderData() {
      this.getData()
    },
    pageChange(page) {
      this.form.page = page
      this.getData()
    },
    tc() {
      return 'text-align:center; color:#333333; font-size:12px;'
    },
    tccolor() {
      return 'text-align:center;background-color:#f5f5f5; font-size:14px;'
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  .nav-list {
    display: flex;
    height: 88px;
    border-bottom: 1px solid #ddd;
    .nav-item {
      flex: 1;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      &:not(:last-child) {
        border-right: 1px solid #ddd;
      }
      .title {
        color: #999;
      }
      .num {
        margin-top: 4px;
        font-size: 24px;
      }
    }
  }
  .top {
    margin: 20px;
    .search {
      float: right;
      margin-left: 12px;
    }
    .input {
      width: 140px;
    }
    .picker {
      float: right;
    }
    .guodu {
      float: right;
      line-height: 30px;
    }
  }
  .pagination {
    float: right;
    margin-top: 12px;
    margin-right: 20px;
  }
}
</style>
